<!--
 * @Author: your name
 * @Date: 2021-04-06 19:33:58
 * @LastEditTime: 2021-06-06 10:01:53
 * @LastEditors: Please set LastEditors
 * @Description: 个人中心 => 药企资讯
 * @FilePath: /medicine-web/src/views/user/modules/document.vue
-->
<template>
  <div class="user-document">
    <div v-if="resultList && resultList.length > 0">
      <div class="main-search__result-item" v-for="item in resultList" :key="item.id">
        <ul class="main-search__result-content">
          <li @click.stop="navToCard(item)">
            <span>{{item.title}}</span>
          </li>
          <li>
            <span class="content-regex">病毒种类：{{item.virus_type2}}</span>
            <span class="content-regex" style="margin-left: 40px;">产品名称：{{item.drug_name}}</span>
            <span class="content-regex" style="margin-left: 40px;">药企名称：{{item.company_name}}</span>
          </li>
          <li>
            来源链接地址：<a style="color: #1890ff" :href="item.source_url" target="_blank" class="content-regex">{{item.source_url}}</a>
          </li>
          <li class="main-search__result-func">
            <span>发表日期：{{item.pubdate}}</span>
            <span>
              <customBtn2 @handleClick="btnClick(item)"></customBtn2>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div v-else>
      <emptyData></emptyData>
    </div>
    <Pagation v-if="resultList && resultList.length > 0" v-model="pageNum" :total="total"  @handlePage="handlePage" style="margin-top: 48px"></Pagation>
  </div>
</template>
<script>
import customBtn2 from '@/components/CustomBtn2/index'
import Pagation from '@/components/Pagation/index'
import emptyData from '@/components/EmptyData/index'
export default {
  name: 'userDocument',
  components: { customBtn2, Pagation, emptyData },
  data () {
    return {
      total: 0,
      pageNum: 1,
      resultList: []
    }
  },
  methods: {
    navToCard (item) {
      // this.$router.push({ path: '/realinfo/card', query: {id} })
      if (item && item.source_url) {
        const aLink = document.createElement('a')
        aLink.href = item.source_url
        aLink.target = '_blank'
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
      } else {
        this.msgInfo('暂无资源，无法进行跳转。')
      }
    },
    async btnClick (rawData) {
      console.log('btnClick', rawData)
      const res = await this.$action('cancelCollection', { user_id: this.getCookie('uid'), id: rawData.id })
      if (res) {
        this.msgSuccess('取消收藏成功')
        this.fetchData()
      } else {
        this.msgError('取消收藏失败')
      }
    },
    handlePage (count) {
      this.pageNum = count
      this.fetchData()
    },
    async fetchData () {
      const res = await this.$action('getUserCollection', { page: this.pageNum, limit: 10, user_id: this.getCookie('uid'), module: 3 })
      console.log('res', res)
      if (res && Object.keys(res).length > 0) {
        this.resultList = res.data_list
        this.total = res.total_number || 0
      }
    },
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.user-document {
  /deep/ .ant-pagination {
    text-align: right;
  }
  .main-search__result-item {
    @include flex-def;
    .main-search__result-content {
      width: 100%;
      margin-left: 8px;
      li:nth-child(n+2) {
        // margin-top: 10px;
        font-size: 14px;
        color: #555;
      }
      li:nth-child(1) {
        font-size: 14px;
        color: #555;
        font-weight: bold;
        cursor: pointer;
      }
      .main-search__result-func {
        @include flex-def;
        @include flex-cCenter;
        @include flex-zBetween;
        height: 32px;
      }
    }
  }
}
</style>